<template>
  <div class="p-2">
    <a-modal v-model:visible="props.visible"  destroyOnClose  :canFullscreen="false" width="600px" :title="title" @ok="handleOk" @cancel="handleCancel">
      <div class="flex header">
        <span>所选知识库必须使用相同的 Embedding 模型</span>
        <a-input
          @pressEnter="loadKnowledgeData"
          class="header-search"
          size="small"
          v-model:value="searchText"
          placeholder="请输入知识库名称，回车搜索"
        ></a-input>
      </div>
      <a-row :span="24">
        <a-col :span="12" v-for="item in appKnowledgeOption"  @click="handleSelect(item)">
          <a-card :style="item.checked ? { border: '1px solid #3370ff' } : {}" hoverable class="checkbox-card" :body-style="{ width: '100%' }">
            <div style="display: flex; width: 100%; justify-content: space-between">
              <div>
                <img class="checkbox-img" :src="knowledge" />
                <span class="checkbox-name">{{ item.name }}</span>
              </div>
              <a-checkbox v-model:checked="item.checked"  @click="handleSelect(item)" @click.stop class="quantum-checker"> </a-checkbox>
            </div>
          </a-card>
        </a-col>
      </a-row>
      <div v-if="knowledgeIds.length > 0" class="use-select">
        已选择 {{ knowledgeIds.length }} 知识库
        <span style="margin-left: 8px; color: #3d79fb; cursor: pointer" @click="handleClearClick">清空</span>
      </div>
      <Pagination
        v-if="appKnowledgeOption.length > 0"
        :current="pageNo"
        :page-size="pageSize"
        :page-size-options="pageSizeOptions"
        :total="total"
        :showQuickJumper="true"
        :showSizeChanger="true"
        @change="handlePageChange"
        class="list-footer"
        size="small"
      />
    </a-modal>
  </div>
</template>

<script setup>
import {onMounted, ref, unref} from 'vue';
  import { Pagination } from 'ant-design-vue';
  import { KnowledgeApi } from '@/views/super/airag/aiknowledge/api/KnowledgeApi';
  import knowledge from '@/views/super/airag/aiknowledge/icon/knowledge.png';
  import { cloneDeep } from 'lodash-es';


    const emits = defineEmits(['update:visible','success']);
    const props = defineProps({
      visible: Boolean,
      data: Object
    });

      const title = ref('添加关联知识库');

      //app知识库
      const appKnowledgeOption = ref([]);
      //应用类型
      const knowledgeIds = ref([]);
      //应用数据
      const knowledgeData = ref([]);
      //当前页数
      const pageNo = ref(1);
      //每页条数
      const pageSize = ref(10);
      //总条数
      const total = ref(0);
      //搜索文本
      const searchText = ref('');
      //可选择的页数
      const pageSizeOptions = ref(['10', '20', '30']);

    //注册modal
    onMounted(async () => {
      knowledgeIds.value = props.data.knowledgeIds ? cloneDeep(props.data.knowledgeIds.split(',')) : [];
      knowledgeData.value = props.data.knowledgeDataList ? cloneDeep(props.data.knowledgeDataList) : [];
      // setModalProps({ minHeight: 500, bodyStyle: { padding: '10px' } });
      loadKnowledgeData();
    });

      /**
       * 保存
       */
      async function handleOk() {
        emits('success', knowledgeIds.value, knowledgeData.value);
        handleCancel();
      }

      /**
       * 取消
       */
      function handleCancel() {
        emits('update:visible', false); // 通知父组件关闭
      }

      //复选框选中事件
      const handleSelect = (item) => {
        let id = item.id;
        const target = appKnowledgeOption.value.find((item) => item.id === id);
        if (target) {
          target.checked = !target.checked;
        }
        //存放选中的知识库的id
        if (knowledgeIds.value.length == 0) {
          knowledgeIds.value.push(id);
          knowledgeData.value.push(item);
          return;
        }
        let findIndex = knowledgeIds.value.findIndex((item) => item === id);
        if (findIndex === -1) {
          knowledgeIds.value.push(id);
          knowledgeData.value.push(item);
        } else {
          knowledgeIds.value.splice(findIndex, 1);
          knowledgeData.value.splice(findIndex, 1);
        }
      };

      /**
       * 加载知识库
       */
      function loadKnowledgeData() {
        let params = {
          pageNo: pageNo.value,
          pageSize: pageSize.value,
          name: searchText.value,
        };
        KnowledgeApi.list(params).then((res) => {
          if (res.success) {
            if (knowledgeIds.value.length > 0) {
              for (const item of res.data.records) {
                if (knowledgeIds.value.includes(item.id)) {
                  item.checked = true;
                }
              }
              appKnowledgeOption.value = res.data.records;
            } else {
              appKnowledgeOption.value = res.data.records;
            }
            total.value = res.data.total;
          } else {
            appKnowledgeOption.value = [];
            total.value = 0;
          }
        });
      }

      /**
       * 分页改变事件
       * @param page
       * @param current
       */
      function handlePageChange(page, current) {
        pageNo.value = page;
        pageSize.value = current;
        loadKnowledgeData();
      }

      /**
       * 清空选中状态
       */
      function handleClearClick() {
        knowledgeIds.value = [];
        knowledgeData.value = [];
        appKnowledgeOption.value.forEach((item) => {
          item.checked = false;
        });
      }

</script>

<style scoped lang="less">
  .header {
    color: #646a73;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 10px;
    .header-search {
      width: 200px;
    }
  }
  .pointer {
    cursor: pointer;
  }
  .type-title {
    color: #1d2025;
    margin-bottom: 4px;
  }
  .type-desc {
    color: #8f959e;
    font-weight: 400;
  }
  .list-footer {
    position: absolute;
    //bottom: 0;
    left: 260px;
  }
  .checkbox-card {
    margin-bottom: 10px;
    margin-right: 10px;
  }
  .checkbox-img {
    width: 30px;
    height: 30px;
  }
  .checkbox-name {
    margin-left: 4px;
  }
  .use-select {
    color: #646a73;
    position: absolute;
    //bottom: 0;
    left: 20px;
  }
</style>
